/* 离线内容页面专用样式 */

/* 基础样式：统一所有区域宽度 */
.offline-content-page .content-centered,
.offline-content-page .page-container,
.offline-search-container,
.storage-info-container,
.offline-mode-toggle,
.available-content-container {
  max-width: 100% !important;
  width: 100% !important;
}

/* 窄屏样式 (默认) */
.offline-content-page .content-centered,
.offline-content-page .page-container {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* 内容卡片和项目基础样式 */
.offline-content-card {
  max-width: 100% !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.offline-content-item {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 0 1rem !important;
}

.offline-content-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* 宽屏优化 (1024px及以上) */
@media (min-width: 1024px) {
  .offline-content-page .content-centered,
  .offline-content-page .page-container {
    max-width: 95% !important;
    margin: 0 auto !important;
  }

  /* 大屏幕下显示多列 */
  .offline-content-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
  }

  /* 配置项宽度优化 */
  .offline-content-item {
    flex: 1 1 300px !important;
    max-width: calc(33.333% - 1rem) !important;
    margin: 0 0.5rem 1rem !important;
  }
}

/* 超宽屏幕优化 (1536px及以上) */
@media (min-width: 1536px) {
  .offline-content-page .content-centered,
  .offline-content-page .page-container {
    max-width: 90% !important;
  }

  /* 超宽屏幕下显示更多列 */
  .offline-content-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
  }
}

/* 搜索和筛选区域优化 */
.offline-search-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* 标签页优化 */
.offline-tabs {
  display: flex !important;
  overflow-x: auto !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 1rem !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.offline-tabs::-webkit-scrollbar {
  display: none !important;
}

.offline-tab {
  white-space: nowrap !important;
  margin-right: 0.5rem !important;
}

/* 存储空间信息区域优化 */
.storage-info-container {
  padding: 1.5rem !important;
  border-radius: 0.75rem !important;
  margin-bottom: 1.5rem !important;
}

/* 可用离线内容区域优化 */
.available-content-container {
  border-radius: 0.75rem !important;
  overflow: hidden !important;
}

/* 展开/折叠内容一致性 */
.available-content-container .offline-content-grid {
  transition: all 0.3s ease !important;
}

/* 离线模式切换区域优化 */
.offline-mode-toggle {
  padding: 1rem !important;
  margin-bottom: 1.5rem !important;
}